<template>
	<div class="search">
		<div class="search_column">
			<div class="column" :class="{'active':selected==index}" v-for="(columns, index) in groups" :key="index" @click="con(columns.group_id,index)">{{columns.group_name}}</div>
		</div>
		<div class="search_time">
			<div class="input">
				<input type="search" v-model="name" @keyup.enter="blur(name)" @blur="blur(name)" placeholder="输入运动员姓名或场地号搜索">
			</div>
			<div @click="scroll" style="width: 40%;">
				<select name="choosedata" id="" v-model="defaults" style="width: 100%;height: 0.6rem;display: inline-block;background: #f6f6f6;margin-left: 0.1rem;"
				 @change="choosedata">
					<option :value="date" v-for="(date, index) in match_date[0]" :key="index">{{date}}</option>
				</select>
			</div>
			<!--      <div class="time" @click.stop="drop = !drop">
        <div class="defaults">{{now_time}}</div>
        <div class="list" v-show="drop">
          <div class="columns" v-for="(date, index) in match_date[0]" :key="index" @click.stop="choosedata(match_date[0][index])">{{date}}</div>
        </div>
        <van-icon name="arrow-down" />
      </div> -->
		</div>
	</div>
</template>
<script>
	import {
		Icon
	} from 'vant';
	export default {
		props: {
			groups: Array,
		},
		data() {
			return {
				selected: 0,
				column: [],
				name: '',
				group_id: '',
				match_date: [],
				defaults: '',
				drop: false,
				now_time: ''
			}
		},
		created() {
			this.match_list()
		},
		methods: {
			match_list() {
				var params = new URLSearchParams();
				params.append('com_id', localStorage.getItem("index"));
				this.$axios.post('/mobile/matching/search_list', params)
					.then(res => {
						if (res.data.code = 2000) {
							this.match_date.push(res.data.data.match_date.split(','));
							this.column = res.data.data.group;
							// this.defaults = this.match_date[0][0];
							this.defaults = res.data.data.now_time;
							this.now_time = res.data.data.now_time
							// console.log(this.column[this.selected].group_id)
							// this.$emit('group',res.data.data.group)
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					})
			},
			con(group_id, index) {
				this.selected = index;
				this.group_id = group_id;
				this.$emit('childByValue', {
					"group_id": this.group_id,
					"name": this.name,
					"match_date": this.defaults
				})
			},
			blur(name) {
				window.scroll(0, 0)
				this.name = name;
				this.$emit('childByValue', {
					"group_id": this.group_id,
					"name": this.name,
					"match_date": this.defaults
				})
			},
			scroll(){
				window.scroll(0, 0)
			},
			choosedata(date) {
				window.scroll(0, 0)
				// this.drop = false;
				// this.defaults = date;
				// this.now_time = date
				this.$emit('childByValue', {
					"group_id": this.group_id,
					"name": this.name,
					"match_date": this.defaults
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.search {
		margin: 0.2rem;

		.search_column {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			margin-bottom: 0.2rem;

			.column {
				padding: 0.1rem 0.1rem;
				margin: 0.03rem;
				flex: 0 0 24%;
				box-sizing: border-box; // margin-left: 0.4rem;
				// margin-top: 0.2rem;
				border: 1px solid #42B574;
				color: #42B574;
				border-radius: 5px; // padding-left: 0.3rem;
			}

			.active {
				background: #42B574;
				color: #fff;
			}
		}

		.search_time {
			display: flex;
			justify-content: space-between;

			.input {
				display: inline-block;
				width: 60%; // margin-left: 0.4rem;

				input {
					width: 100%;
					height: 100%;
					border: 1px #ccc solid;
					padding: 0.1rem;
					border-radius: 4px;
					display: inline-block;
					box-sizing: border-box;
				}
			}

			.time {
				position: relative;
				width: 35%;
				border: 1px #ccc solid;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				i {
					padding-right: 0.3rem;
				}

				.defaults {
					padding-left: 0.3rem;
					white-space: nowrap;
				}

				.list {
					position: absolute;
					top: 28px;
					width: 100%;
					text-align: left;
					background: #fff;
					box-sizing: border-box;
					border-radius: 4px;
					box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
					position: absolute;
					z-index: 900;

					.columns {
						padding: 0.1rem;
						padding-left: 0.3rem;
					}
				}
			}
		}
	}
</style>
